<template>
  <div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <form id="examineEvaluateForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
          <input type="hidden" name="id" v-model="item.id"/>
          <input type="hidden" name="token" v-model="item.token"/>
          <input type="hidden" name="newFlag" v-model="newFlag"/>
          <div class="clearfix "></div>
          <div class="col-md-6">

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">考核指标名称：</label>
              <div class="col-md-12">
                <select data-placeholder="选择考核指标名称" id="bean-targetId" name="targetId" class="form-control"
                    aria-describedby="bean-targetId-error" aria-invalid="true" required="" aria-required="true">
                  <option value="">--请选择考核指标名称--</option>
                  <option v-if="targets != null && targets.length > 0"
                      v-for="(obj, index) in targets" :value="obj.id"
                      :selected="obj.id == item.targetId">{{ obj.name }}
                  </option>
                </select>
                <input id="bean-name" name="name" v-model="item.name" class="form-control" type="hidden"
                    placeholder="请输入考核指标名称" required="" aria-required="true" aria-describedby="bean-name-error"
                    maxlength="55" aria-invalid="true">
                <span id="bean-name-error" class="help-block m-b-none" for="bean-name"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">考核周期：</label>
              <div class="col-md-12">
                <select data-placeholder="选择考核周期" id="bean-period" name="period" class="form-control"
                    required="" aria-required="true" aria-describedby="bean-period-error" aria-invalid="true">
                  <option value="">--请选择考核周期--</option>
                  <option value="按年份" :selected="item.period == '按年份'">按年份</option>
                  <option value="按季度" :selected="item.period == '按季度'">按季度</option>
                  <option value="按月份" :selected="item.period == '按月份'">按月份</option>
                </select>
                <span id="bean-period-error" class="help-block m-b-none" for="bean-period"></span>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">考核内容：</label>
              <div class="col-md-12">
                <textarea id="bean-content" name="content" class="form-control" placeholder="请输入考核内容"
                    aria-describedby="bean-content-error" maxlength="1024"
                    aria-invalid="true">{{item.content}}</textarea>
                <span id="bean-content-error" class="help-block m-b-none" for="bean-content"></span>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">考核时间：</label>
              <div class="col-md-12">
                <input autocomplete="off" id="bean-startDate" name="startDate" v-model="item.startDate"
                    class="laydate-icon form-control layer-date" type="text"
                    placeholder="请输入考核起始时间" required=""
                    aria-required="true" aria-describedby="bean-startDate-error" aria-invalid="true">
                <span id="bean-startDate-error" class="help-block m-b-none" for="bean-startDate"></span>
                至
                <input autocomplete="off" id="bean-endDate" name="endDate" v-model="item.endDate"
                    class="laydate-icon form-control layer-date" type="text"
                    placeholder="请输入考核结束时间"
                    required=""
                    aria-required="true" aria-describedby="bean-endDate-error" aria-invalid="true">
                <span id="bean-endDate-error" class="help-block m-b-none" for="bean-endDate"></span>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">考核截止时间：</label>
              <div class="col-md-12">
                <input autocomplete="off" id="bean-deadline" name="deadline" v-model="item.deadline"
                    class="laydate-icon form-control layer-date" type="text" placeholder="请输入考核截止时间" required=""
                    aria-required="true" aria-describedby="bean-deadline-error" aria-invalid="true">
                <span id="bean-deadline-error" class="help-block m-b-none" for="bean-deadline"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label font-noraml">考核下级：</label>
              <div class="col-md-12">
                <select multiple data-placeholder="选择考核下级" id="bean-subordinateIds" name="subordinateIds"
                    class="form-control chosen-select" aria-describedby="bean-subordinateIds-error"
                    aria-invalid="true" required="" aria-required="true">
                  <option v-if="staffs != null && staffs.length > 0"
                      v-for="(staff, index) in staffs" :value="staff.id"
                      :selected="item.subordinateIds != null && item.subordinateIds.indexOf(staff.id) > -1">
                    {{ staff.name }}
                  </option>
                </select>
                <input id="bean-subordinateNames" name="subordinateNames" v-model="item.subordinateNames"
                    class="form-control" type="hidden" placeholder="请输入考核下级姓名，多个用逗号分隔"
                    aria-describedby="bean-subordinateNames-error" maxlength="1024" aria-invalid="true">
                <span id="bean-subordinateIds-error" class="help-block m-b-none" for="bean-subordinateIds"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">备注：</label>
              <div class="col-md-12">
                <input id="bean-memo" name="memo" v-model="item.memo" class="form-control" type="text"
                    placeholder="请输入备注" aria-describedby="bean-memo-error" maxlength="255" aria-invalid="true">
                <span id="bean-memo-error" class="help-block m-b-none" for="bean-memo"></span>
              </div>
            </div>

          </div>

          <div class="clearfix "></div>
          <div class="col-12 text-center" style="height: 50px;">
            <div>
              <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/validate/validation-vendor.js'

import 'layui-laydate/dist/theme/default/laydate.css'
import laydate from 'layui-laydate'
import {apiUtil, axiosContentType, site} from '@/assets/js/boss'
import '#/chosen/chosen.css'
import '#/chosen/chosen.jquery.js'

export default {
  data() {
    return {
      item: {},
      targets: [],
      staffs: [],
      newFlag: 0,
      uuidToken: ''
    }
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    $('#examineEvaluateForm').validate();
    that.staff.init(function () {
      that.newFlag = sessionStorage.getItem(site.examineEvaluate.info);
      if (that.newFlag) that.uuidToken = apiUtil.guid();
      if (apiUtil.existSessionKey(site.examineEvaluate.info)) {
        that.info();
      }
    });
    that.targetList();

    that.staffList();
    // 监听河长值改变事件
    $('#bean-subordinateIds').change(function () {
      let text = '';
      $(this).find('option:selected').each(function () {
        text += text === '' ? $.trim($(this).text()) : ',' + $.trim($(this).text());
      });
      $('#bean-subordinateNames').val(text);
    });
    // 监听考核方案名称值改变事件
    $('#bean-targetId').change(function () {
      $('#bean-name').val($(this).find('option:selected').text());
      let targetId = $(this).val();
      for (let i in that.targets) {
        let obj = that.targets[i];
        if (obj.id === targetId) {
          that.item.period = obj.period;
          $('#bean-period').val(obj.period);
          that.item.startDate = obj.startDate;
          $('#bean-startDate').val(obj.startDate);
          that.item.endDate = obj.endDate;
          $('#bean-endDate').val(obj.endDate);
        }
      }
    });

    laydate.render({
      elem: '#bean-startDate',
      event: 'click',
      type: 'date',
      format: 'yyyy-MM-dd',
      done: function (val) {
        that.item.startDate = val;
      }
    });

    laydate.render({
      elem: '#bean-endDate',
      event: 'click',
      type: 'date',
      format: 'yyyy-MM-dd',
      done: function (val) {
        that.item.endDate = val;
      }
    });

    laydate.render({
      elem: '#bean-deadline',
      event: 'click',
      type: 'date',
      format: 'yyyy-MM-dd',
      done: function (val) {
        that.item.deadline = val;
      }
    });

    that.initSelect();
    // $("#bean-subordinateIds").chosen({});
  },
  methods: {
    initSelect: function () {
      var config = {
        '.chosen-select': {},
        '.chosen-select-deselect': {allow_single_deselect: true},
        '.chosen-select-no-single': {disable_search_threshold: 10},
        '.chosen-select-no-results': {no_results_text: '无匹配数据'},
        '.chosen-select-rtl': {rtl: true},
        '.chosen-select-width': {width: '95%'}
      }
      for (var selector in config) {
        $(selector).chosen(config[selector]);
      }
    },
    info() {
      let that = this;
      axios.get(site.examineEvaluate.info + sessionStorage.getItem(site.examineEvaluate.info), {}).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.item = result.data;
          setTimeout(function () {
            $('.chosen-select').trigger('chosen:updated');
          }, 300);
        } else {
          alert(result.message);
        }
      });
    },
    save() {
      let that = this;
      if ($('#examineEvaluateForm').valid()) {
        axios.post(site.examineEvaluate.save, $('#examineEvaluateForm').serialize(),
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
          const result = response.data;
          // console.info("获取数据.." + JSON.stringify(result));
          if (result.code === 0) {
            parent.$vueApp.page();
            alert('保存成功!');
            that.lbox.closeMyBoxLayer()
          } else {
            alert('保存失败!' + result.message);
          }
        });
      }
    },
    targetList() {
      let that = this;
      axios.get(site.examineTarget.list, {}).then(function (response) {
        var result = response.data;
        if (result.code === 0) {
          that.targets = result.data;
        } else {
          alert(result.message);
        }
      });
    },
    staffList() {
      let that = this;
      let staff = sessionStorage.getItem('staff');
      let currAreaId = null;
      if (staff != null) {
        currAreaId = JSON.parse(staff).currAreaId;
      }
      axios.get(site.riverSupervisor.list + '?parentAreaId=' + currAreaId, {}).then(function (response) {
        var result = response.data;
        if (result.code === 0) {
          that.staffs = result.data;
          setTimeout(function () {
            $('.chosen-select').trigger('chosen:updated');
          }, 300);
        } else {
          alert(result.message);
        }
      });
    }
  }
}
</script>

